<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常见单位</title>
    <style>
     /* px 像素
        em =>  px    em参照父元素的字体大小fon-size => html{font-size:16px;}
        %  =>  px    参照父元素的宽度大小  => 自适应 + 等分

        rem => px
        vw  => px
     */
     .parent{
         font-size:20px;
     }
     p{
        /* 2em =  40px  */
         font-size:2em;
     }


     /* %  left：80% = 640px  right:20% = 160px */
     .main{width:800px;height:200px;background-color: green;}
     .left{float:left;width:80%;height:200px;background-color: royalblue;}
     .right{float:left;width:20%;height:200px;background-color: yellow;}
    </style>
</head>

<body>
<h1 class="logo">
    <a href="#">淘宝网</a>
</h1>  

<div class="parent">
    <p>珠峰培训珠峰培训珠峰培训珠峰培训珠峰培训珠峰培训珠峰培训珠峰培训珠峰培训珠峰培训珠峰培训珠峰培训珠峰培训珠峰培训珠峰培训珠峰培训珠峰培训珠峰培训珠峰培训珠峰培训珠峰培训珠峰培训珠峰培训</p>
</div>

<div class="main">
    <div class="left"></div>
    <div class="right"></div>
</div>

<div class="item">
    <div class="iteminner"></div>
    <div class="iteminner"></div>
    <div class="iteminner"></div>
    <div class="iteminner"></div>
</div>

</body>

</html>